<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .outer {
            width: 500px;
            background-color: skyblue;
            border: 1px solid black;
            padding: 20px;
        }

        .box {
            width: 200px;
            height: 200px;
            font-size: 20px;
        }

        .box1 {
            background-color: #888;
        }

        .box2 {
            background-color: orange;
            position: fixed;
            top: 0px;
            left: 0px;
        }

        .box3 {
            background-color: green;
        }

    </style>
</head>
<body>

    <!-- 固定定位是相对于视口的，不论页面如何滑动，都是相当于视口的左上角进行定位 -->

    <!-- 开启固定定位后，元素也变成了定位元素，脱离文档流，和绝对定位的元素有着一样的性质 -->

    <div class="outer">
        <div class="box box1">1</div>
        <div class="box box2">2</div>
        <div class="box box3">3</div>
    </div>

    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quae aut numquam beatae? Facilis asperiores distinctio placeat quaerat illum aliquam facere ea iste, aut aliquid dolores temporibus nulla suscipit ducimus quidem deserunt. Repellendus quia, provident aliquid cum velit expedita officiis eius aperiam autem labore tempora nesciunt aspernatur eum qui similique, et dignissimos rerum, nam voluptatibus a. Rem inventore illo facilis at quis nihil doloribus possimus perspiciatis eius ea temporibus est ipsum unde expedita, harum, odit laboriosam. Reiciendis consequatur eligendi dicta quo, officia, nulla blanditiis at accusamus repellat voluptatum illo, vel odio excepturi officiis placeat suscipit iusto aliquid quam dolores nisi quidem sit? Dicta quia provident libero nisi, accusamus ut officiis error ea voluptatem ipsum ad neque iusto consectetur amet laudantium! Obcaecati beatae, saepe sunt, omnis nulla minima harum ipsa sit sed quae, suscipit unde error dolor explicabo deserunt reiciendis labore repudiandae consectetur quos nemo autem. Et ullam itaque sint labore enim ipsa aliquid facilis provident? Iusto tempore atque tenetur laboriosam fugiat, ipsam illo, repudiandae eos officia commodi quod sunt iure ullam accusantium deleniti voluptatibus natus doloremque vero placeat doloribus corporis cumque! Non, possimus officiis id delectus iusto porro a ullam tenetur minus ipsam ipsum omnis voluptas dolore alias! Labore eos dolor atque in! Sit earum dicta voluptatibus, doloribus voluptas ipsum amet beatae id reiciendis voluptatem, dolorem vero debitis similique. Eius praesentium dolorum repudiandae veritatis voluptas nobis impedit laborum, sint beatae! Sunt, voluptate totam odio, voluptatibus maxime officia aspernatur repellendus voluptatem mollitia itaque error ea dolores explicabo esse quaerat vel pariatur modi architecto eaque. Autem repudiandae eum assumenda, voluptas et voluptatem, possimus soluta eius odio ipsam quia beatae quod error! Blanditiis a, reprehenderit beatae consectetur quisquam nesciunt fugit nisi nemo voluptas officiis repellendus quis voluptatum nam eaque libero magni voluptatem sit dignissimos doloribus non quas delectus, unde nulla. Explicabo commodi, minima alias voluptates veritatis dolores officia voluptas dolor asperiores, sapiente corrupti ipsam veniam porro, et reprehenderit. Quos, voluptatibus tenetur sit nam, commodi ullam magnam beatae maiores temporibus numquam possimus? Sunt consequuntur veniam ab autem ea beatae in asperiores exercitationem modi natus placeat vel perferendis optio omnis id, quos dicta expedita sed quidem doloremque est, velit reprehenderit nulla. Aliquid eaque sed reiciendis rem voluptate. Veritatis dolor odio nulla deserunt ullam nobis, commodi rem inventore. Suscipit, impedit obcaecati molestias repellendus magnam omnis? Maiores pariatur vitae temporibus nobis magnam quos debitis at impedit eius eos iusto explicabo exercitationem dignissimos quas sunt nihil amet perferendis provident repudiandae, iste eum alias, placeat natus magni! Cum numquam ipsam quam, officia quisquam, nemo aperiam aliquid explicabo facere optio quas ducimus fugit! Rem nihil quam sint tenetur numquam nemo voluptatem nobis totam earum, id quidem qui facere omnis soluta voluptatum vero praesentium iste amet voluptas. Aut minus dolor vitae obcaecati repellendus minima voluptate qui similique necessitatibus! Ex repellat quibusdam sed tempora aut incidunt magnam distinctio temporibus voluptates soluta dolorem minima quia vero beatae velit accusantium, optio ducimus ab a. Possimus aperiam voluptate inventore aspernatur est rerum neque ab, laborum voluptatum maiores non ratione fugit explicabo iste alias minima animi quisquam totam dignissimos placeat voluptates nesciunt similique pariatur? Repellat ea nam iusto est repellendus laboriosam delectus sit, molestiae soluta nesciunt porro, nihil aut cumque, cum eum qui. Ullam, sequi illum, ex quisquam aperiam ipsum ea doloremque necessitatibus provident excepturi iste enim, qui fugiat est odit eos. Possimus consectetur reprehenderit veritatis cupiditate provident eveniet quia aliquid ea, vero, nihil quod, minus est nemo ex unde minima tempora sed ut! Eligendi id assumenda voluptates! Tempora quod cumque sed, iusto commodi eius libero quidem eum! Laborum repellat veritatis eaque sunt labore, quaerat aut quae! Earum, omnis numquam neque sunt vitae voluptas veritatis! Consectetur, doloremque molestias. Debitis voluptatem tempore nesciunt obcaecati officia placeat maiores fuga esse laborum eligendi, ipsam soluta aut, magni minima in sit exercitationem rem reprehenderit. Perspiciatis, eligendi earum. Fuga, voluptates tempore, voluptate minima sit quidem incidunt dolores obcaecati possimus atque veniam et. Eaque, facere vel? Reiciendis dicta inventore recusandae omnis odit quo expedita perferendis, facilis autem, est saepe temporibus debitis neque. Vitae consequuntur magnam quo earum praesentium, asperiores similique voluptatibus itaque harum mollitia voluptate sunt iure quidem iste dignissimos soluta eligendi illum odio possimus dolore. Sed architecto rerum, doloribus sapiente ex repellat unde eveniet nemo officiis, facilis esse error fugiat consequuntur dignissimos natus voluptatem id praesentium incidunt molestiae culpa commodi necessitatibus numquam? Sed quo ullam vero minima saepe sequi beatae distinctio sunt omnis, animi, commodi, vitae dolore eveniet hic eum eaque. Voluptatem consequatur, excepturi perspiciatis inventore debitis odio nam eos totam illo ratione voluptate in suscipit quis illum dolorum non commodi. Aspernatur quos eaque tenetur molestias nisi inventore itaque eos ex enim a. Cumque ratione iure est neque impedit dolore aperiam? Adipisci aliquam cupiditate in, sunt non nesciunt ut laudantium deleniti molestias quo! Minima id nam perferendis, accusantium non corrupti veniam. Hic odio nemo temporibus amet qui assumenda inventore id totam dolor, deserunt incidunt iusto impedit aspernatur at doloribus veritatis dolorem nihil fuga ducimus omnis voluptates natus deleniti cupiditate cum. Sit explicabo quas alias magni. Maxime, perspiciatis voluptas. Veritatis error repellat cupiditate iusto vitae quae voluptatem ea saepe. Id iure modi illum iusto ipsa aliquid ullam a dolorum incidunt tenetur perspiciatis voluptate harum nulla quisquam alias ipsam ducimus deserunt cum molestias, esse dolores saepe perferendis quo! Odio quam laudantium pariatur. Quam laborum, facilis ipsa vero architecto ex fuga dolor recusandae ab, aliquam minus animi, ea nam? Eaque impedit ex tempore repudiandae pariatur culpa maiores incidunt facilis. Perspiciatis illo unde sint quas veniam praesentium, quaerat sit magni nemo reprehenderit minus voluptatem voluptate commodi ratione distinctio numquam magnam deserunt adipisci alias consectetur a esse dolor at! Corrupti possimus quaerat numquam dolor, sint a, deserunt sed tempore, id fugiat ea animi libero esse pariatur cum saepe. Velit fugiat, molestiae veritatis nihil, maxime, temporibus cumque provident expedita laborum unde aut quasi ducimus aliquid deleniti autem saepe cupiditate consequuntur ratione atque fuga dolorum praesentium dignissimos facere. Repudiandae ad quo optio distinctio sunt, libero vitae nam labore asperiores. Totam, neque laudantium architecto minima, nostrum tempore fuga ut illum consequatur consequuntur excepturi exercitationem, accusamus sapiente dolorum nesciunt laboriosam voluptatem.
    
</body>
</html>